<template>
  <div style="height: 100%;margin: 10px 20px">
    <el-button type="primary" @click="getSelectedRows">获取选中数据</el-button>
        <ag-grid-vue
            style="width: 800px; height: 500px;"
            class="ag-theme-alpine"
            :row-id="rowId"
            :columnDefs="columnDefs"
            @grid-ready="onGridReady"
            :defaultColDef="defaultColDef"
            row-selection="multiple"
            :tooltip-show-delay="500"
            :locale-text="AG_GRID_LOCALE_CN"
            :row-class-rules="rowClassRules"
            :suppressRowClickSelection="true"
            :rowData="rowData">
          </ag-grid-vue>
    </div>
    
</template>

<script>
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import 'ag-grid-enterprise';
import { AgGridVue } from 'ag-grid-vue3';
import mitt from 'mitt'
import { AG_GRID_LOCALE_CN } from './locale.cn';
import StatusButton from './custom-switch.vue'
export default {
  name: "App",
  components: {
    'ag-grid-vue': AgGridVue,
    // eslint-disable-next-line vue/no-unused-components
    StatusButton
  },
  created() {
    this.emitter  = mitt() 
    this.emitter.on('changeSwich', this.handlerChangeSwich);
    this.getRowId = params => {
      const rowId = params.data.id;
      return rowId;
    };
  },
  data: function () {
    return {
      AG_GRID_LOCALE_CN,
      rowClassRules: null,
      rowId: null,
      emitter: null,
      columnDefs: [
      {
          field: 'AG_UNIQ_CHECKBOX',
          headerName: '多选框',
          checkboxSelection: true,
          maxWidth: 40,
          headerCheckboxSelection: true,
          editable: false,
          pinned: 'left'
        },
        { headerName: '序号', field: 'athlete'},
        { headerName: '发票代号', field: 'age'},
        { field: 'bronze', headerName: '使用状态', editable: false, cellRenderer: 'StatusButton' },
        { headerName: '发票号码', field: 'country',},
        { headerName: '发票全号', field: 'year', },
        { headerName: '开票日期', field: 'date',},
        { headerName: '销货方单位编号', field: 'sport',},
        { headerName: '销货方单位名称', field: 'gold' },
        { headerName: '购买方单位编号', field: 'silver' },
        { headerName: '购买方单位名称', field: 'bronze' },
        { headerName: '顺序号', field: 'total' },
      ],
      gridApi: null,
      columnApi: null,
      defaultColDef: {
        flex: 1,
        minWidth: 100,
        editable: true,
        sortable: true,
        resizable: true,
        filter: true,
        autoHeaderHeight: true // 头部高度自适应
      },
      rowData: null,
    };
  },
  methods: {
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;

      const updateData = (data) => params.api.setRowData(data);

      fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
        .then((resp) => resp.json())
        .then((data) => updateData(data));

        this.rowClassRules = {
          'ag-row-warning': params => {
            return params.data.age > 25;
          }
        };
    },
    // 获取选中的行的数据
    getSelectedRows() {
      const selectedNodes = this.gridApi.getSelectedNodes();
      const selectedData = selectedNodes.map(node => node.data);
      console.log('selected', selectedData);
      return selectedData;
    },
    handlerChangeSwich({rowId, colId, val}) {
      // const rowNode = this.gridApi.getRowNode(rowId);
      // const rowData = rowNode.data;
    }
  },
};

</script>
<style>
.ag-row-warning {
  /* background-color: #ff0; */
}
</style>